<template>
  <view class="list-index">
    <view class="header-wrap">
      <view
        class="item"
        v-for="(label, index) of labels"
        :style="label.style"
        :key="index"
        >{{ label.name }}</view
      >
    </view>

    <view class="list" v-if="lists && lists.length">
      <view
        :class="['item', 'rank-bg-' + idx]"
        v-for="(item, idx) of lists"
        :key="idx"
      >
        <view class="cell no" :style="labels[0].style">
          <image
            v-if="[1, 2, 3].includes(idx)"
            class="rank"
            :src="ranks[idx - 1]"
            mode="scaleToFill"
          />
          <view v-else class="no">{{ item.sort }}</view>
        </view>
        <view class="cell" :style="labels[1].style">
          <view class="user-image">
            <image
              v-if="item.tx"
              class="image"
              :src="joinUrl(item.tx)"
              mode="scaleToFill"
            />
            <image
              v-else
              class="image"
              src="@/static/images/default_avator.svg"
              mode="scaleToFill"
            />
          </view>
          <view class="user-name">{{ item.xm }}</view>
          <view class="is-my" v-if="idx === 0">（我自己）</view>
        </view>
        <view class="cell score" :style="labels[2].style">{{
          item.score || 0
        }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import rank1 from "../static/base64/rank1";
import rank2 from "../static/base64/rank2";
import rank3 from "../static/base64/rank3";

import { joinUrl } from "@/utils/tools";

const ranks = [rank1, rank2, rank3];

import { watchEffect } from "vue";

defineProps({
  lists: { type: Array, default: () => [] },
});

const labels: any = [
  { name: "排名", style: { width: "160rpx", "justify-content": "center" } },
  { name: "用户", style: { width: "100%" } },
  { name: "得分", style: { width: "160rpx", "justify-content": "center" } },
];
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 100%;
} 

.list-index {
  .header-wrap {
    display: flex;
    align-items: center;
    height: 100rpx;
    font-size: 24rpx;
    color: #666666;

    .item {
      display: flex;
    }
  }

  .list {
    .item {
      display: flex;
      align-content: center;
      width: 622rpx;
      height: 112rpx;
      border-radius: 16rpx 0 0 16rpx;
      margin-bottom: 16rpx;

      .cell {
        display: flex;
        align-items: center;

        .user-image {
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          box-sizing: border-box;
          overflow: hidden;
        }

        .user-name {
          margin-left: 12rpx;
        }

        &.score {
          font-size: 32rpx;
          color: #424242;
          font-weight: bold;
        }
      }

      .no {
        .rank {
          width: 42rpx;
          height: 54rpx;
        }
      }

      &.rank-bg-1 {
        background: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0) 20%,
          #fcf0db 100%
        );
      }

      &.rank-bg-2 {
        background: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0) 20%,
          #d9e5f9 100%
        );
      }

      &.rank-bg-3 {
        background: linear-gradient(
          270deg,
          rgba(255, 255, 255, 0) 20%,
          #fbd8dc 100%
        );
      }

      &.rank-bg-5 {
        border-radius: 0;
        border-top: 2rpx solid #f4f4f4;
      }
    }
  }
}
</style>